<template>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h2 class="sub-header">信息列表</h2>
    <router-link class="btn btn-success" to="/newstudent">添加信息</router-link>
    <router-link class="btn btn-success" to="/newstudents">批量添加</router-link>
    <a class="btn btn-danger" @click.prevent="deleteStudents" v-show="showCheckBox">删除选中</a>
    <a class="btn btn-danger" @click.prevent="showCheck">{{ deleteText }}</a>
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th v-if="showCheckBox">
              <input type="checkbox" name="checkAll" v-model="checkAll" @change="changeChecked" id />
            </th>
            <th>#</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="student in students" :key="student.id">
            <td v-if="showCheckBox">
              <input
                :value="student.id"
                type="checkbox"
                :name="student.id"
                v-model="checkModel"
                :id="student.id"
              />
            </td>
            <td>{{ student.id }}</td>
            <td>{{ student.name }}</td>
            <td>{{ student.gender == 0 ? '男':'女' }}</td>
            <td>{{ student.age}}</td>
            <td>{{ student.hobbies }}</td>
            <td>{{ student.time | dateFormat }}</td>
            <td>
              <router-link
                :to="{name:'editStudent',params:{id:student.id}}"
                class="btn btn-primary btn-sm"
                :thisStudent="student"
              >编辑</router-link>
              <a class="btn btn-danger btn-sm" @click="deleteStudent(student.id,student)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { Toast,Indicator } from "mint-ui";
import {
  addStudentData,
  deleteStudentData,
  addHistoryData,
  getStudentData,
  getHistoryData,
  getMsgData
} from "@/apis/data";
export default {
  data() {
    return {
      checkAll: false,
      checkModel: [],
      showCheckBox: false,
      deleteText: "批量删除",
      students: []
    };
  },
  methods: {
    getStudents() {
      getStudentData().then(res => {
        this.students = res.data[0];
      });
    },
    deleteStudent(studentID, student) {
      Indicator.open();
      var id = parseInt(studentID);
      deleteStudentData(id).then(response => {
        this.getStudents();
        addHistoryData(student).then(response => {
          if (response.data.code == 0) {
            Indicator.close();
          }
        });
      });
    },
    deleteStudents() {
      if (this.checkModel.length == 0) {
        Toast({
          message: "请选择要删除的信息",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-remove"
        });
        return false;
      }
      var id = this.checkModel;
      deleteStudentData(id).then(response => {
        this.getStudents();
        Toast({
          message: "选中的信息删除成功",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-ok"
        });
      });
    },
    showCheck() {
      this.showCheckBox = !this.showCheckBox;
      if (this.showCheckBox == true) this.deleteText = "取消";
      else this.deleteText = "批量删除";
    },
    changeChecked() {
      if (this.checkAll == true) {
        this.students.forEach((value, index) => {
          this.checkModel.push(value.id);
        });
      }
    }
  },
  watch: {
    $route(route) {
      if (route.name === "students") {
        this.getStudents();
      }
    },
    checkModel: function(newVal, oldVal) {
      if (this.checkModel.length == this.students.length) this.checkAll = true;
      else this.checkAll = false;
    }
  },
  created() {
    this.getStudents();
  }
};
</script>
<style>
</style>
